<template>
  <el-dialog :title="title"
    :visible.sync="dialogFormVisible"
    :append-to-body = "body"
    top="250px"
    style="min-width:500px"
    :show-close="show"
    :on-remove="remove"
  >
    <el-form ref="dataForm" 
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
    >
        <el-form-item label="类型名称" prop="typename">
            <el-input v-model="temp.typename" />
        </el-form-item>
        <el-form-item label="类型图片" prop="typeimg">
            <el-upload 
                class="upload-demo"
                multiple
                :limit="limit"
                :on-exceed="handleExceed"
                action="xxx"
                :file-list="fileList"
                :on-change="changeFile"
                :auto-upload="false"
            >
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item>
        <div>
            <el-button @click="closeDialog">
                取消
            </el-button>
            <el-button type="primary" @click="title==='新建类型'?createData():updateData()">
                提交
            </el-button>
        </div>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
    name:'TypeDialog',
    props:{
        title:String,
        dialogFormVisible:Boolean,
        row:Object
    },
    watch:{
        row(){
            this.temp.typename = this.row.typename;
        }
    },
    data(){
        const validateTypeName = (rule,value,callback) =>{
            if(!value){
                 callback(new Error('类型不允许为空'));
            }else{
                callback()
            }
        }
        return{
            temp:{
                typename:''
            },
            file:'',
            rules:{
                typename:[{validator:validateTypeName,trigger: 'blur'}]
            },
            limit:1,
            fileList:[
            ],
            body:true,
            show:false
        }
    },
    methods:{
        createData(){
            this.$refs.dataForm.validate( valid => {
                if(valid){
                    
                      if(this.fileList.length <= 0){
                        this.$message.warning('请选择类型图片！')
                        return ;
                      } else{
                          let typeName = this.temp.typename,
                          file = this.fileList[0].raw;
                          this.$emit('createData',{typeName,file})
                          this.initData();
                      }   
                        
                }
                 
                
            })
           
        },
        changeFile(file,fileList){
           this.fileList = fileList
        },
        updateData(){
            this.$refs.dataForm.validate( valid => {
                if(valid){
                    
                      if(this.fileList.length <= 0){
                          let typeName = this.temp.typename
                          
                          this.$emit('updateData',{typeName})
                          this.initData()
                      } else{
                          let typeName = this.temp.typename,
                          file = this.fileList[0].raw;
                          this.$emit('updateData',{typeName,file})
                          this.initData()
                      }   
                        
                }
                 
                
            })
        },
        initData(){
             this.temp.typename = '';
             this.file = '';
             this.fileList=[];
             this.row={};
        },
        handleExceed(){
            this.$message.warning('只允许上传一个图片文件')
        },
        closeDialog(){
            this.temp.typename = '';
            this.file = '';
            this.fileList=[];
            this.$emit('closeDialog');
        },
        remove(){
            this.file = '';
            this.fileList=[];
        }
    }
}
</script>

<style>

</style>